<template>
<div class="user-main">
    <!-- 搜索内容 -->
    <el-card class="card">
        <div slot="header" class="header">查询订单</div>
        <div>
            <el-form ref="searchForm" :model="search" label-width="120px">
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item label="物流单号查询">
                            <el-input v-model="search.deliverySn" placeholder="请输入物流单号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="用户账号查询">
                            <el-input v-model="search.memberUsername" placeholder="请输入用户账号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="订单编号查询">
                            <el-input v-model="search.orderSn" placeholder="请输入订单编号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item label="订单类型查询">
                            <el-select v-model="search.orderType" placeholder="请选择订单类型">
                                <el-option v-for="item in orderTypes" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="付款方式查询">
                            <el-select v-model="search.payType" placeholder="请选择付款方式">
                                <el-option v-for="item in payTypes" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="订单来源查询">
                            <el-select v-model="search.sourceType" placeholder="请选择订单来源">
                                <el-option v-for="item in sourceTypes" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item label="订单状态查询">
                            <el-select v-model="search.status" placeholder="请选择订单状态">
                                <el-option v-for="item in statuss" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" style="text-align:right;">
                        <el-button type="primary" @click="resetSearch">重置搜索</el-button>
                    </el-col>
                    <el-col :span="8" style="text-align:right;">
                        <el-button type="primary" @click="submitSearch">查询订单</el-button>
                    </el-col>
                </el-row>

            </el-form>
        </div>
    </el-card>

    <!-- 订单列表 -->
    <el-card class="card">
        <div slot="header">
        </div>
        <div>
            <el-table :data="order" style="width: 100%" border>
                <el-table-column label="序号" width="60" type="index">
                </el-table-column>
              
                <el-table-column header-align="center" align="center" prop="memberUsername" label="用户账号" width="120">
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="orderSn" label="订单编号" width="180">
                </el-table-column>
               
                <el-table-column header-align="center" align="center" label="支付类型" width="120">
                    <template slot-scope="scope">
                        <!-- {{scope.row.payType}} -->

                        <el-tag type="danger" v-if="scope.row.payType===0">未支付</el-tag>
                        <!-- weiixn alipay -->
                        <!-- <el-tag type="warning" v-else-if="scope.row.payType===1">微信</el-tag>
                        <el-tag type="warning" v-else>支付宝</el-tag> -->
                                     <svg-icon icon-class="weixin" class="weixin"  v-else-if="scope.row.payType===1"/>
                                     <svg-icon icon-class="alipay" class="aliPay" v-else />

                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" label="订单状态" width="120">
                    <template slot-scope="scope">
                        <!-- {{scope.row.status}} -->
                            <el-tag type="success" v-if="scope.row.status===0"   effect="dark">待付款</el-tag>
                            <el-tag type="warning" v-else-if="scope.row.status===1"  effect="dark">待发货</el-tag>
                            <el-tag type="danger" v-else-if="scope.row.status===2"  effect="dark">已发货</el-tag>
                            <el-tag type="warning" v-else-if="scope.row.status===3"  effect="dark">已完成</el-tag>
                            <el-tag type="danger" v-else-if="scope.row.status===4"  effect="dark">已关闭</el-tag>
                            <el-tag type="success" v-else>无效订单</el-tag>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" label="订单来源" width="120">
                    <template slot-scope="scope">
                        <!-- {{scope.row.sourceType}} -->
                        <el-tag type="warning" v-if="scope.row.sourceType===0" effect="light">PC订单</el-tag>
                        <el-tag type="warning" v-else effect="light">APP订单</el-tag>
                    </template>
                </el-table-column>
                 <el-table-column header-align="center" align="center" label="订单类型" width="120">
                    <template slot-scope="scope">
                        <el-tag type="warning" v-if="scope.row.orderType===0" effect="dark">正常订单</el-tag>
                        <el-tag type="info" v-else effect="dark">秒杀订单</el-tag>
                    </template>
                </el-table-column>
                 <el-table-column header-align="center" align="center" prop="payAmount" label="金额">
                </el-table-column>
                <el-table-column header-align="center" align="center" label="删除状态">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.deleteStatus" :active-value="1" :inactive-value="0"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="paymentTime" label="支付时间" width="150">
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="receiveTime" label="收货时间" width="150">
                </el-table-column>
                  <!-- <el-table-column header-align="center" align="center" prop="totalQuantity" label="订单总数">
                </el-table-column>

                <el-table-column header-align="center" align="center" prop="note" label="备注">
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="freightAmount" label="运费">
                </el-table-column> -->

                <el-table-column fixed="right" label="操作" width="140" class="btns" header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="searchOrder(scope.row.id)">查看订单</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页器 -->
        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.start" :page-sizes="page.sizes" :page-size="page.limit" layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount">
        </el-pagination>
    </el-card>

</div>
</template>

<script>
import {
    findOrdersByPage
} from '@/api/order/index'
export default {
    components: {

    },
    data() {
        return {
            order: [],
            // 分页器内容
            page: {
                limit: 10, //每一页数量
                sizes: [10, 20, 30, 40],
                totalCount: 40, //总页数
                start: 1 //当前页码
            },
            // 查询
            search: {
                deliverySn: "",
  id: "",
  memberUsername: "",
  orderSn: "",
//   orderType: 0,
//   payType: 0,
//   sourceType: 0,
//   status: 0
            },
            // 订单类型
            orderTypes: [{
                    name: '正常订单',
                    id: 0
                },
                {
                    name: '秒杀订单',
                    id: 1
                }
            ],
            // 付款类型
            payTypes: [{
                    name: '未支付',
                    id: 0
                },
                {
                    name: '微信',
                    id: 1
                },
                {
                    name: '支付宝',
                    id: 2
                }

            ],
            // 订单来源
            sourceTypes: [{
                    name: 'PC订单',
                    id: 0
                },
                {
                    name: 'app订单',
                    id: 1
                }
            ],
            // 订单状态
            statuss: [{
                    name: '待付款',
                    id: 0
                },
                {
                    name: '待发货',
                    id: 1
                },
                {
                    name: '已发货',
                    id: 2
                },
                {
                    name: '已完成',
                    id: 3
                },
                {
                    name: '已关闭',
                    id: 4
                },
                {
                    name: '无效订单',
                    id: 5
                }
            ]

        };
    },
    computed: {

    },
    created() {
        this.init()

    },
    mounted() {

    },
    methods: {
        init() {
            // 判断搜索条件--只要有数据的
                let search={}
            for(let item in this.search){
                if(this.search[item]){
                  search[item]=this.search[item]
                }
            }
            console.log(search);
           
            findOrdersByPage(this.page.start, this.page.limit,search).then(res => {
                console.log(res);
                if (res.success) {
                    this.order = res.data.rows
                    this.page.totalCount = res.data.total

                } else {
                    this.$message.error('数据请求错误')
                }
            })
        },
        // 分页器
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.page.limit = val
            this.init()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            // 修改当前页
            this.page.start = val
            this.init()
        },
       
        searchOrder(id) {
            this.$router.push({
                name: 'orderListEdit',
                query: {
                    id
                }
            })
        },
        submitSearch() {
            // 请求第一页数据
            // this.page.start=1
            this.init()
        },
        // 重置搜索条件
        resetSearch(){
        this.searchForm = this.$options.data().searchForm
        }

    },
};
</script>

<style lang="scss" scoped>
.card {
    margin: 30px;
    .header{
        font-weight: bolder;
        font-size: 20px;
      color: #26A65B;

    }

    img {
        width: 120px;
        height: 120px;
    }

    .pagination {
        margin-top: 20px;
    }
}
</style>
